<template>
  <el-dialog width="45%"
             :title="serviceinnerVisibleTitle"
             class="serviceCheckChatHistoryDetail photoCon"
             :visible.sync="serviceinnerVisible"
             v-dialogDrag
             append-to-body
             @close='closeChatHistoryDialog'></el-dialog>
</template>

<script>
import { getChatContent } from '@/api/workOrderController.js'
export default {
  name: 'chatInfoDiaog',
  data () {
    return {
      circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
      squareUrl: "https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png",
      chatInfo: [],
      agentId: '',



      serviceinnerVisible: false,
      serviceinnerVisibleTitle: '',
      serviceInteractionDataList: [],
      recordList: [],

    }
  },
  mounted () {
  },
  methods: {
    //关闭聊天记录框
    closeChatHistoryDialog: function () {
      console.log('关闭聊天记录框')
      $('#J_pg').hide();
      $('#window').hide();
      $('.serviceCheckChatHistoryDetail .el-dialog__body').html('')
      // $('.serviceCheckChatHistoryDetail .el-dialog__header').html('')
    },
    cancelTransfer () {
      this.$emit('chatShow', false)
    },
    // 客服服务历史-点击查看聊天记录或交互小结
    checkHistory: function (agentId, index, row, div) {
      let sesContent = row.sessionContent
      let voiceContent = this.recordList
      this.innerVisibleTitle = '聊天内容'
      this.serviceinnerVisibleTitle = '聊天内容'
      this.serviceinnerVisible = true
      setTimeout(function () {
        let ele = $('.' + div + ' .el-dialog__body')
        ele.html('')
        if (voiceContent.length > 0) {
          let audioHtml = ''
          for (var m = 0; m < voiceContent.length; m++) {
            if (voiceContent[m].url === '') {
              audioHtml += ''
            } else {
              audioHtml += '<div style="width:100%;height:200px;"><p></p><div style="width:67%;height:200px;margin-left:16%"><video id="video"  src="' + voiceContent[m].url + '" controls="controls" preload="auto"  style="width:100%;height: 182px;"></video></div></div>'
            }
          }
          ele.html(audioHtml)
        }
        chatUiKit.showChatHistoryDetail(ele, sesContent, agentId, true)
      }, 300)
    },
    getChatContent (params) {
      getChatContent(params).then(res => {
        let data = res.data
        if (data.retCode === 1) {
          this.agentId = data.data.relationContent[0].agentId
          this.chatInfo = data.data.relationContent[0].sessionContent
          this.serviceInteractionDataList = data.data.relationContent[0]
          this.recordList = data.data.recordList || []
          this.checkHistory(this.agentId, 0, this.serviceInteractionDataList, 'serviceCheckChatHistoryDetail')
          this.$message({
            type: 'success',
            message: res.data.msg,
          })
        } else {
          this.$message({
            type: 'error',
            message: res.data.msg,
          })
        }
      })
    }
  }
}
</script>

<style scoped>
.icon {
  width: 35px;
  height: 35px;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
.chatInfo {
  max-height: 400px;
  padding: 15px;
  overflow-y: auto;
}
.infoTip {
  line-height: 25px;
}

.leftShow {
  text-align: left;
}
.rightShow {
  text-align: right;
}
.conInfo {
  padding: 8px;
  border-radius: 5px;
  display: inline-block;
  border-right: none;
  max-width: 90%;
  word-break: break-word;
}
.leftShow .conInfo {
  border: 1px solid #d1ebff;
  background-color: #edf8ff;
}
.rightShow .conInfo {
  border: 1px solid #f9dec4;
  background-color: #fff3e4;
}
.chatContent {
  display: inline-block;
  width: 90%;
}
</style>
